<template>
	<view class="content">
		<div class="middle">
			<div class="middle2">
			</div>
			<img src="https://pic.imgdb.cn/item/642547f5a682492fcc15cd5d.gif" />
		</div>
		<h1><span>方方老师</span></h1>
		<br>
		<h2><span>-- 每天都要开心吖</span></h2>
		<!-- <audio autoplay="autoplay" loop="loop" preload="auto" src="https://www.ihaoge.net/server/1/156809258.mp3">
		</audio> -->
	</view>

</template>
<script type="text/javascript" src="//js.users.51.la/21504121.js"></script>
<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {
			const innerAudioContext = uni.createInnerAudioContext();
			innerAudioContext.autoplay = true;
			innerAudioContext.loop = true;
			innerAudioContext.src = '/static/_jaycd雨的印记钢琴版纯音乐mqms2.ogg';
			
			innerAudioContext.onPlay(() => {
				console.log('开始播放');
			});
			
			innerAudioContext.onError((res) => {
				console.log('音频播放错误:', res);
			});
			
			innerAudioContext.onCanplay(() => {
				console.log('音频可以播放');
			});
		},
		methods: {

		}
	}
</script>

<style>
html,
body {
	height: 100%;
	padding: 0;
	margin: 0;
	background: #000;
	position: relative;
	color: rgb(239, 165, 241);
	font-family: "Courier New", Courier, monospace;
}

img {
	display: block;
	margin: 0 auto;
}

label {
	display: block;
	margin: 0 auto;
	color: pink;
	font-size: 20px;
	padding-right: 5px;
	/*往左偏移10px*/
	animation: mymove 2.5s infinite;
	/* //关联动画名称、动画时长、循环 */
	/*Safari 和 Chrome:*/
	-webkit-animation: mymove 2.5s infinite;
	/* //同上（兼容） */
}

@keyframes mymove {
	50% {
		font-size: 40px;
	}

	/* //名字放大大小 */
}

/*Safari 和 Chrome:*/
@-webkit-keyframes mymove {
	50% {
		font-size: 40px;
	}

	/* //名字放大大小 */
}

.middle {
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
}

.middle img {
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.middle2 {
	position: absolute;
	z-index: 2;
	width: 100%;
	height: 100%;
	margin: auto;
	display: flex;
	align-items: center;
}

h1 {
	position: absolute;
	top: 15vh;
	left: 20%;
	transform: translate(-50%, -50%);
	font-size: 1.45em;
	width: 100%;
	letter-spacing: 2px;
	text-align: center;
}


h2 {
	position: absolute;
	margin: auto;
	font-size: 1.1em;
	top: 20vh;
	text-align: center;
	width: 100%;
}

h2 span {
	width: 360px;
	margin: auto;
	display: inline-block;

}
</style>